<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查看图表</title>
    <style>
        body,html{height: 100%}
    </style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="main" style="width: 100%;height:100%;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '在线投票结果展示'
        },
        tooltip: {},
        legend: {
            data:['票数']
        },
        xAxis: {
            data: [],
            axisLabel:{
                show:true,
                interval: 0,    // {number}表示隔几个标签显示一个标签
                rotate: 30/*,
                textStyle: {
                    color: 'blue',
                    fontFamily: 'sans-serif',
                    fontSize: 15,
                    fontStyle: 'italic',
                    fontWeight: 'bold'
                }*/
            }


        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            barWidth:10,
            data: []
        }]
    };

    // 使用异步方式去后台获取实际数据
    $.ajax({
        url:'getVote.php',
        dataType:'json',
        success:function (d) {
            myChart.setOption({
                xAxis: {
                    data: d.name
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '票数',
                    data: d.data
                }]
            });
        },
        error:function () {

        }
    })
    myChart.setOption(option);
</script>
</body>
</html>